<template>
	<view class="coupon">
		<view class="coupon-left">
			<image v-if="coupon.status === 0" :src="MyCouponActive" class="coupon-img"/>
			<image v-else :src="MyCoupon" class="coupon-img"/>
			<view class="left-content">
				<view class="price">
					<view class="price-unit">￥</view>
					<view class="price-num">{{coupon.amount}}</view>
				</view>
			</view>
		</view>
		<view class="coupon-right">
			<view class="coupon-name">{{coupon.name}}<span v-if="coupon.for_user === 1" class="only-coupon">{{coupon.strategy_name}}</span></view>
			<view class="h-line"/>
			<view class="time">
				<view class="time-left">
					{{coupon.created_at | parseTime('YYYY/MM/DD')}} - {{coupon.expire_time | parseTime('YYYY/MM/DD')}}
				</view>
				<view class="time-status active">立即使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import MyCoupon from '@/static/images/my_coupon.png'
	// import MyCouponActive from '@/static/images/my_coupon_active.png'
	
	export default {
		props: {
			coupon: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data() {
			return {
				MyCoupon:"https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/my_coupon.png",
				MyCouponActive:"https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/my_coupon_active.png"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon{
		width: 100%;
		height: 170rpx;
		display: flex;
		.coupon-left{
			width: 240rpx;
			position: relative;
			.coupon-img{
				width: 240rpx;
				height: 170rpx;
			}
			.left-content{
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.price{
				color: #fff;
				display: flex;
				align-items: baseline;
				.price-unit{
					font-size: 32rpx;
					line-height: 1;
					font-weight: bold;
				}
				.price-num{
					font-size: 56rpx;
					line-height: 1;
					font-weight: bold;
				}
			}
		}
		.coupon-right{
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			background-color: #fff;
			.coupon-name{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.only-coupon {
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.time{
				padding: 20rpx 20rpx 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.time-left{
				color: #999;
				display: flex;
				font-size: 24rpx;
			}
			.time-status{
				color: #fff;
				width: 132rpx;
				height: 40rpx;
				font-size: 22rpx;
				border-radius: 100rpx;
				background-color: #cecece;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.time-status.active{
				background-color: $theme_color;
			}
		}
	}
</style>
